<template>
  <div>
    <button>RoundFourth</button>
    <ElButton @click="changeA()">{{ a }}</ElButton>
    <ElButton @click="changeB('go')">{{ a }}</ElButton>
    <ElButton @click="changeC('go')">{{ a }}</ElButton>
    <div abc="some" :def="b.name">yyy</div>
    <!-- vfor 可以使得标签出现n次 -->
    <ElButton v-for="(e, i) in fruits" :key="i">{{ e }}</ElButton>
    <!-- vif 可以使得标签出现0或1次 -->
    <ElButton v-if="a > 100">go</ElButton>

  </div>
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from

export default {
  name: 'RoundFourth',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      a: 11,
      b: {
        name: 'zhangsan',
        age: 11
      },
      fruits: ['apple', 'banana', 'orange']
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {},
  methods: {
    // sampleM() {},
    changeA() {
      console.log('zzzz')
    },
    changeB(item: string) {
      console.log('yyyy' + item)
    },
    changeC(item: string) {
      const some = 'yyyy'
      console.log(some + item + this.b.name)
      this.changeA()
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
}
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
